<template>
  <div class="LoginBackground">
    <div class="LoginForm">
      <div class="big-contain">
        <el-form :model="loginForm" status-icon>
          <div class="bform">
            <el-form-item prop="username" :rules="loginRules.usernameRules" class="NameNotNull">
              <div class="UserName">
                <input class="Input" type="text" v-model="loginForm.username" autocomplete="off" placeholder="用户名" />
              </div>
            </el-form-item>
            <el-form-item prop="password" :rules="loginRules.passwordRules" class="PasswordNotNull">
              <div class="PassWord">
                <input class="Input" type="password" v-model="loginForm.password" autocomplete="off" placeholder="密码"
                  @keydown.enter="handleLogin()" />
              </div>
            </el-form-item>
            <el-form-item>
              <button class="LoginBtn" @click="handleLogin()" />
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { loginRules } from "@/utils/validator";
import $axios from "@/http/http";

export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
      },
      loginRules,
    };
  },
  methods: {
    handleLogin() {
      $axios.post("/user/login", {
        uname: this.loginForm.username,
        pwd: this.loginForm.password
      }).then(res => {
        console.log("res", res)
        if (res.code === 200 && res.data.utype === 'ROLE_1') {
          this.$message({
            message: res.message,
            type: "success"
          })
          //管理员页面
          this.$router.push("/home/welcome")
        } else {
          this.$message({
            message: res.message,
            type: "error"
          })
          // 暂时不跳转到医生页面上
        }
      })
    }
  },
};
</script>
<style scoped>
.LoginBackground {
  background: url("../assets/LoginBackground.jpg") no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  overflow: hidden;

}

.LoginForm {
  background: url("../assets/Login.png") no-repeat;
  background-size: 800px, 599px;
  width: 1000px;
  height: 800px;
  margin-left: 555px;
  margin-top: 100px;
  overflow: hidden;
}

.UserName {
  overflow: hidden;
  border: 2px solid #2abeb2;
  border-radius: 20px;
  margin-top: 270px;
  margin-left: -60px;
  height: 70px;
  width: 530px;
}

.PassWord {
  overflow: hidden;
  border: 2px solid #2abeb2;
  border-radius: 20px;
  margin-top: 20px;
  margin-left: -60px;
  height: 70px;
  width: 530px;
}

.Input {
  overflow: hidden;
  margin-left: 20px;
  height: 80px;
  font-size: 35px;
  color: #2abeb2;

}

.Logo {
  overflow: hidden;
  margin-left: 15px;
  margin-bottom: 5px;
}

.LoginBtn {
  overflow: hidden;
  background: url("../assets/LoginButton.png");
  background-size: 100%;
  width: 220px;
  height: 65px;
  margin-left: 290px;
  margin-top: 10px;
}

.NameNotNull {
  margin-left: 200px;

}

.PasswordNotNull {
  margin-left: 200px;
}

input::-webkit-input-placeholder {
  color: #2abeb2;
}

input::-ms-input-placeholder {
  color: #2abeb2;
}
</style>